/**
 * 3D 杯子模型
 * 
 * @author Gill Gong
 */

 import React from "react"
 import { GLView } from "expo-gl"
 import ExpoTHREE, { THREE } from "expo-three"
 import { Text } from "react-native"
 import OrbitControls from "~/components/orbit-controls/index"
 import Mask from "~/components/mask"
      
 class Cup3D extends React.Component {

  static navigationOptions = () => {
    
    return {
      title: '3D Cup View'
    }
  }
  
  constructor(options) {
    super(options)

    let { width, height } = Jw.getClientWidthAndHeight()
    this.controls = null
    this.state = { masked: true }
    this.camera = new THREE.PerspectiveCamera(75, width/height, .1, 1000)
  }

  render() {
    let headerHeight = Jw.getHeaderHeight()
    let { height, width } = Jw.getClientWidthAndHeight()
    
    height = height - headerHeight
    return (
      <OrbitControls style={{ height, flex:1 }} camera={ this.camera } height={ height } width={ width }>
        <GLView
          style={{ height }}
          onContextCreate = { (gl)=>this.onContextCreate(gl) }>
        </GLView>
        { this.state.masked && (<Mask><Text style={{ fontSize: 50, color: "#fff" }}>Loading...</Text></Mask>) }  
      </OrbitControls>
    ) 
  }

  async onContextCreate(gl) {
    try {     
      let headerHeight = Jw.getHeaderHeight()
      let { width, height } = Jw.getClientWidthAndHeight()

      let camera = this.camera
      let scene = new THREE.Scene()
      let renderer = new ExpoTHREE.Renderer({ gl })
      let light = new THREE.AmbientLight(0x555555);
      let directionLight = new THREE.DirectionalLight(0xeeeeee, .5)
      let directionLight1 = new THREE.DirectionalLight(0xeeeeee, .5)
      //let group = await ExpoTHREE.loadAsync([ require('~/assets/3d/cup.obj'),require('~/assets/3d/cup.mtl') ], null, null)
      let group = await ExpoTHREE.loadAsync([ require('~/assets/3d/cup1.obj') ], null, null)

      height = height - headerHeight
      directionLight.position.z = 200
      directionLight.position.y = 0
      directionLight1.position.z = -200
      directionLight1.position.y = 0
      camera.position.z = 300
      camera.position.y = 2
      
      renderer.setPixelRatio(Jw.getPixelRatio());
      renderer.setSize(width, height);
      renderer.setClearColor(0xffffff, 1.0)
      
      scene.add(group)
      scene.add(light)
      scene.add(directionLight)
      scene.add(directionLight1)
      
      let center = this.getCenter(group)
      group.position.x = group.position.x - center.x
      group.position.y = group.position.y - center.y
      group.position.z = group.position.z - center.z

      let renderOver = function() {
        requestAnimationFrame(renderOver)
        //group.rotation.y += 0.01
        renderer.render(scene, camera)
        gl.endFrameEXP();
      }

      renderOver()
      this.setState({ masked: false })
    }catch(error) {
      
      console.warn(error)
    }
  }

  getCenter(group) {
    let center = new THREE.Vector3()
    let wrapper = new THREE.Box3()

    wrapper.expandByObject(group)
    wrapper.getCenter(center)

    return center
  }
 }

 export default Cup3D
